<template>
    <view class="login">
        <u--image :src="'/static/img/login/login.png'" width="96px" height="96px"></u--image>
        <view class="login-title">
            <text class="login-title-text">欢迎使用聚帮数智化平台</text>
        </view>
        <view class="login-content">
            <u--form labelPosition="top" :model="params" :rules="rules" ref="uForm" :labelStyle="{ color: '#0C1019FF', fontSize: '36rpx', fontWeight: '500' }">
                <u-form-item label="账号" prop="username" borderBottom ref="item1">
                    <u--input v-model="params.username" type="number" placeholder="请输入你的手机号" border="none"></u--input>
                </u-form-item>
                <u-form-item label="密码" prop="password" borderBottom ref="item1">
                    <u-input
                        v-model="params.password"
                        :password="showPassword"
                        placeholder="请输入你的密码" border="none">
                        <template slot="suffix">
                            <u-icon @click="showPasswordHandle" :name="seeIcon" color="#677585FF" size="20"></u-icon>
                        </template>
                    </u-input>
                </u-form-item>
				<u-form-item v-if="!isNew && captchaEnabled" label="验证码" label-width="100" borderBottom ref="item1">
                    <u-input v-model="imgCode" type="number" placeholder="请输入验证码" border="none" :customStyle="{ borderRadius: '40rpx' }">
						<template slot="suffix">
							<img @click="getImgCode" style="width: 150rpx; height: 70rpx;" :src="codeImgSrc" alt="">
						</template>
					</u-input>
                </u-form-item>
                <u-form-item v-if="isNew" label="验证码" label-width="100" borderBottom ref="item1">
                    <u-input v-model="code" type="number" placeholder="请输入验证码" border="none" :customStyle="{ borderRadius: '40rpx' }">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button :customStyle="{ borderRadius: '40rpx', color: '#FFFFFFFF', backgroundColor: '#4DACB1FF' }"
								@tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
                </u-form-item>
            </u--form>
            <view class="login-btn" @click="submit()">登录</view>
			<view style="margin-top: 10rpx;">
				<label @click="changeisRemember">
					<checkbox value="cb" :checked="isRemember" style="transform:scale(0.7)" />记住密码
				</label>
			</view>
            <view style="margin-top: 48rpx;">
                <u--text @click="goPassWord" text="忘记密码" align="center" color="#4DACB1FF" ></u--text>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            params: {
                username: '',
                password: '',
				uuid: '',
				code: '',
				udid: ''
            },
			imgCode: '', // 图片验证码
			uuid: '',
			code: '', // 验证码
			tips: '',
			isNew: false, // 是否新设备登录
			codeImgSrc: '',
            // 是否显示密码
            showPassword: true,
			isRemember: true,
            seeIcon: 'eye-fill',
			captchaEnabled: false,
			rules: {
				'username': {
					type: 'string',
					required: true,
					message: '请填写手机号',
					trigger: ['blur', 'change']
				},
				'password': {
					type: 'string',
					required: true,
					message: '请输入密码',
					trigger: ['blur', 'change']
				},
			}
        }
    },
    onLoad() {
		this.params.udid = uni.getDeviceInfo().deviceId
		this.getImgCode()
	},
	onShow() {
		let account = uni.getStorageSync('account')
		if(account) {
			this.params.username = account.username
			this.params.password = account.password
		}
	},
    methods: {
		getImgCode() {
			this.$http.get('/captchaImage', {}).then(res => {
				if(res.code == 200) {
					this.codeImgSrc = 'data:image/png;base64,' + res.img
					this.params.uuid = res.uuid
					this.captchaEnabled = res.captchaEnabled
				}
			})
		},
        codeChange(text) {
            this.tips = text;
        },
        getCode() {
			if(!this.params.username) return uni.$u.toast('请输入手机号')
            if (this.$refs.uCode.canGetCode) {
                // 模拟向后端请求验证码
                uni.showLoading({
                    title: '正在获取验证码'
                })
                this.$http.get('/captchaSms', { phone: this.params.username }).then(res => {
                    if (res.code == 200) {
                        this.params.uuid = res.uuid
                        uni.hideLoading();
                        uni.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    } 
                })
            } else {
                uni.$u.toast('倒计时结束后再发送');
            }
        },
		changeisRemember() {
			this.isRemember = !this.isRemember
		},
        submit() {
			if(this.isNew && !this.code) return uni.$u.toast('请输入验证码')
			let obj = JSON.parse(JSON.stringify(this.params))
			if(this.isNew) {
				obj['code'] = this.code
			} else {
				obj['code'] = this.imgCode
			}
            this.$refs.uForm.validate().then(res => {
                this.$http.post('/app/login', obj).then(res => {
                    let data = res.data
                    if (data.code == 200) {
						if(this.isRemember) {
							uni.setStorageSync('account', {username:this.params.username,password: this.params.password  })
						} else {
							uni.removeStorageSync('account')
						}
                        uni.setStorageSync('token', data.token)
                        this.getType()
                        this.noMessage()
                        uni.showToast({
                            title: '登录成功',
                            icon: 'success',
                            duration: 3000
                        })
                        setTimeout(() => {
                            uni.switchTab({
                                url: '/pages/index/index'
                            })
                        }, 2000)
                    } else if(data.code == 10100) {
						this.isNew = true
						uni.showToast({
                            title: '新设备登录,请输入手机验证码',
                            icon: 'none',
                            duration: 3000
                        })
					}
                }).catch(err => {

                })
			}).catch(errors => {
				uni.$u.toast('请输入账号或者密码')
			})
        },
        /**
         * 切换密码显示状态
         * 
         * 本函数用于切换密码输入框中密码的显示和隐藏状态当密码显示状态改变时
         * 同时更新眼睛图标的样式以直观地反映当前的显示状态
         */
        showPasswordHandle() {
            // 反转密码显示状态
            this.showPassword = !this.showPassword;
            // 根据密码显示状态选择相应的眼睛图标样式
            this.seeIcon = this.showPassword ? 'eye-fill' : 'eye-off';
        },
        goPassWord() {
            uni.navigateTo({
                url: '/pages/login/resetPassword'
            })
        },

		noMessage() {
			this.$http.get('/app/notification/list', { pageSize: 1, pageNum: 1, status: 1 }).then(res => {
				if (res.code == 200) {
					if(res.total > 0) {
                        console.log(res.total)
						uni.setTabBarBadge({ //显示数字  
							index: 3, //tabbar下标
							text: String(res.total) //此处一定要为字符串
						})
					} else {
						uni.removeTabBarBadge({
							index: 3
						});
					}
				} 
			})
		},
		getType() {
			this.get_bus_client_type()
			this.bus_reminder_method()
			this.bus_customer_status()
			this.bus_source()
			this.bus_followup_task()
			this.bus_followup_type()
			this.bus_followup_field_management()
			this.bus_order_status()
			this.bus_task_status()
			this.bus_pay_status()
			this.bus_product_specification_unit()
			this.bus_pay_type()
			this.bus_examine_status()
			this.bus_customer_starlevel()
			this.bs_performance_targettype()
			this.bus_product_type()
		},
		// 商品类型
		bus_product_type() {
		    this.$http.get('/app/system/dict/data/type/bus_product_type', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_product_type', JSON.stringify(res.data))
				} 
			})
		},
		// 付款类型
		bus_customer_starlevel() {
            this.$http.get('/app/system/dict/data/type/bus_customer_starlevel', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_customer_starlevel', JSON.stringify(res.data))
				} 
			})
        },
		// 付款类型
		bus_pay_type() {
            this.$http.get('/app/system/dict/data/type/bus_pay_type', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_pay_type', JSON.stringify(res.data))
				} 
			})
        },
		// 审批状态
		bus_examine_status() {
            this.$http.get('/app/system/dict/data/type/bus_examine_status', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_examine_status', JSON.stringify(res.data))
				} 
			})
        },
		// 商品规格
		bus_product_specification_unit() {
            this.$http.get('/app/system/dict/data/type/bus_product_specification_unit', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_product_specification_unit', JSON.stringify(res.data))
				} 
			})
        },
		// 跟进内容
		bus_pay_status() {
            this.$http.get('/app/system/dict/data/type/bus_pay_status', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_pay_status', JSON.stringify(res.data))
				} 
			})
        },
		// 跟进内容
		bus_task_status() {
            this.$http.get('/app/system/dict/data/type/bus_task_status', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_task_status', JSON.stringify(res.data))
				} 
			})
        },
		// 跟进内容
		bus_order_status() {
            this.$http.get('/app/system/dict/data/type/bus_order_status', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_order_status', JSON.stringify(res.data))
				} 
			})
        },
		// 跟进内容
		bus_followup_field_management() {
            this.$http.get('/app/system/dict/data/type/bus_followup_field_management', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_followup_field_management', JSON.stringify(res.data))
				} 
			})
        },
		// 客户类型
		get_bus_client_type() {
            this.$http.get('/system/dict/data/type/bus_client_type', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_client_type', JSON.stringify(res.data))
				} 
			})
        },
		// 提醒方式
		bus_reminder_method() {
            this.$http.get('/system/dict/data/type/bus_reminder_method', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
                    uni.setStorageSync('bus_reminder_method', JSON.stringify(res.data))
				} 
			})
        },
		// 客户状态
		bus_customer_status() {
            this.$http.get('/system/dict/data/type/bus_customer_status', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					uni.setStorageSync('bus_customer_status', JSON.stringify(res.data))
				} 
			})
        },
		// 客户来源
		bus_source() {
            this.$http.get('/system/dict/data/type/bus_source', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
                    uni.setStorageSync('bus_source', JSON.stringify(res.data))
				} 
			})
        },
		// 任务提醒
		bus_followup_task() {
            this.$http.get('/system/dict/data/type/bus_followup_task', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
                    uni.setStorageSync('bus_followup_task', JSON.stringify(res.data))
				} 
			})
        },
		// 跟进类型
		bus_followup_type() {
            this.$http.get('/system/dict/data/type/bus_followup_type', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
                    uni.setStorageSync('bus_followup_type', JSON.stringify(res.data))
				} 
			})
        },
		// 绩效
		bs_performance_targettype() {
            this.$http.get('/system/dict/data/type/bs_performance_targettype', {}).then(res => {
				if (res.code == 200) {
					res.data = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
                    uni.setStorageSync('bs_performance_targettype', JSON.stringify(res.data))
				} 
			})
        },
	},
}
</script>
<style lang="scss" scoped>
.login {
    height: calc(100vh - 44px);
    background: linear-gradient(180deg, rgba(77, 172, 177, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80rpx;

    .login-title {
        margin-top: 40rpx;
        font-size: 48rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }
    .login-content {
        width: 80%;
        margin-top: 100rpx;
        .login-btn {
            width: 100%;
            border-radius: 80rpx;
            background: rgba(77, 172, 177, 1);
            text-align: center;
            height: 96rpx;
            line-height: 96rpx;
            color: rgba(255, 255, 255, 1);
            margin-top: 60rpx;
        }
    }
}
</style>